<script setup>
import  InputTools from './inputTool.vue'
import {UseUserStore} from '@/stores/index.js'
import { message } from 'ant-design-vue';
import {useRouter} from 'vue-router'
let router= useRouter()
let userStore = UseUserStore()


// 两个输入框
let inputVal=reactive({
  inputRoomId:'',
  inputUserName:'',
  confirmInputUserNameStatus:false,
  confirmInputRoomIdStatus:false
})

const onComplete = (val) => {
  console.log('complete', val);
 // val =  val.forEach(item=>item.join(''))
  console.log('complete', val.join(''));
  val =  val.join('')
  if(isSixDigitNumber(val)){
    inputVal.inputRoomId = val

    // 房间输入框可以提交
    inputVal.confirmInputRoomIdStatus = true
  }
}
watch(()=>inputVal.inputUserName,(newVal)=>{
  if(newVal!==''){
    inputVal.confirmInputUserNameStatus = true
  }else{
    inputVal.confirmInputUserNameStatus = false
  }
})
function  joinRoom(){
  userStore.userInfo.roomId =  inputVal.inputRoomId
  userStore.userInfo.userName = inputVal.inputUserName
  console.log(inputVal.inputUserName)
  if(inputVal.confirmInputRoomIdStatus && inputVal.confirmInputUserNameStatus){
    message.success(`验证成功,正在进入${inputVal.inputRoomId}房间`)
    router.push('/main')
  }else{
    message.error('用户名或房间格式不正确');
  }
}

function isSixDigitNumber(variable) {
  // 使用正则表达式匹配6位数字
  const regex = /^\d{6}$/;

  // 使用 test 方法检查变量是否符合正则表达式
  return regex.test(variable);
}

</script>

<template>
  <div class="home-box h-screen">
  <div class=" w-full   m-0 p-0 box-border bg-center bg-no-repeat bg-cover flex justify-center text-center ">
    <div class="home-card w-3/12 h-3/5 bg-white opacity-85 mt-36 rounded-xl p-5">
      <div class="mt-8">
        <h2 class=" font-black text-2xl mb-2.5">输入房间号</h2>
        <p class="text-sm">和好友输入同一个房间号,一起聊天!</p>
      </div>

      <div class="relative w-11/12 ml-3 mt-24">
        <div class="w-4/5 flex mt-0 ml-auto mr-auto relative bottom-8">
          <a-input :status="inputVal.confirmInputUserNameStatus" v-model:value="inputVal.inputUserName" placeholder="请输入用户名"  />
        </div>
      <InputTools @complete="onComplete"  ></InputTools>
      </div>
     <div class="mt-12 mb-12">
       <a-button type="primary" class="w-3/4" @click="joinRoom">
         加入房间
       </a-button>
     </div>
    </div>
  </div>
  </div>
</template>

<style scoped>
.home-box{
    background: url('./Asset/bg.png.jpg') no-repeat center;
    background-size: cover;
  }
  .home-card{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
</style>